<template>
  <div class="list-wrap">
    <!-- <div class="search-box">
      <div class="search-item select" @click="showPicker = true">
        <span>{{ pickText }}</span>
        <van-icon name="arrow-down" />
      </div>
      <div class="search-item" @click="showTime = true">
        <span>{{ timeStr }}</span>
      </div>
    </div> -->

    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirmPicker"
      />
    </van-popup>

    <van-calendar
      v-model="showTime"
      type="range"
      color="#5691f6"
      :min-date="minDate"
      @confirm="onConfirmTime"
    />

    <ListOfSingle
      :apiUrl="apiUrl"
      :apiParams="params"
      bgColor="transparent"
      ref="ListOfSingle"
      :dropdownRefresh="true"
      @itemClick="handleItemClick"
    >
      <template v-slot="{ data }">
        <div class="list-police-box">
          <div class="police-title">{{ data.device_name }}</div>
          <p>{{ data.trigger_message }}</p>
          <p>{{ moment(data.updatetime).format("YYYY-MM-DD HH:mm:ss") }}</p>
          <div class="status-text">
            <i :class="colorType[data.handle_status_text]" />
            <span>{{ data.handle_status_text }}</span>
          </div>
        </div>
      </template>
    </ListOfSingle>
  </div>
</template>
<script>
import { ListOfSingle } from "@/components";
import moment from "moment";

export default {
  components: {
    ListOfSingle
  },
  data() {
    return {
      moment,
      apiUrl: "/xvUHiJZSmB.php/equipment/trigger/log/index",
      params: {
        addtabs: 1,
        sort: "id",
        order: "desc",
        filter: '{"status":"abnormal"}',
        op: '{"status":"="}'
      },
      colorType: {
        未处理: "red",
        已处理: "green",
        恢复正常: "blue"
      },
      showPicker: false,
      pickText: "怀化武陵医院",
      columns: ["怀化武陵医院", "怀化武陵医院1", "怀化武陵医院2"],
      minDate: new Date(2000, 0, 1),
      showTime: false,
      timeStr: "请选择时间"
    };
  },
  methods: {
    handleItemClick(item) {},
    onConfirmPicker(value) {
      this.pickText = value;
      this.showPicker = false;
    },
    onConfirmTime(date) {
      const [start, end] = date;
      this.showTime = false;
      this.timeStr = `${moment(start).format("YYYY/MM/DD")} -
      ${moment(end).format("YYYY/MM/DD")}`;
    }
  }
};
</script>

<style scoped lang="scss">
.list-wrap {
  min-height: 100vh;
  background: #f5f6f8;
  padding: 20px 0;
}
.search-box {
  min-height: 100px;
  background: #fff;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .search-item {
    height: 50px;
    line-height: 50px;
    border-radius: 25px;
    font-size: 28px;
    padding: 0 25px;
    color: #888;
    background: #f0f3f8;
    margin-left: 20px;
    display: flex;
    align-items: center;
    &.select {
      max-width: 200px;
      padding: 0 15px 0 25px;
    }
    span {
      flex: 1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .van-icon {
      margin-left: 10px;
    }
  }
}
.list-police-box {
  padding: 15px 0 15px 40px;
  background: #fff;
  border-bottom: 1px solid #f2f2f2;
  position: relative;
  .police-title {
    font-size: 32px;
    color: #333;
    margin-bottom: 10px;
  }
  p {
    color: #9099ae;
    font-size: 28px;
    line-height: 38px;
  }
  .status-text {
    display: flex;
    align-items: center;
    position: absolute;
    right: 20px;
    top: 20px;
    i {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: 10px;
      &.red {
        background: #db6468;
      }
      &.green {
        background: #78c775;
      }
      &.blue {
        background: #3a88e1;
      }
    }
    span {
      font-size: 26px;
      color: #9099ae;
    }
  }
}
</style>
